<template>
  <div class="bb-bg">
    <div class="el-flex">
      <div class="co-title-name">
        <img src="@/assets/cockpit/subdivision/securityOneMap/item2-title.png" alt="" />
      </div>
      <div class="co-title-right">
        <div class="co-title-breathe"><i></i><i></i><i></i><i></i><i></i><i></i></div>
      </div>
    </div>

    <div class="content">
      <!--  -->
      <ul class="bpl1-stac">
        <li class="bpl1-st-each ">
          <i class="bpl1-ste-icon"><img src="@/assets/cockpit/subdivision/securityOneMap/item2-1-icon.png" alt="" /></i>
          <div class="bpl1-ste-word">
            <h6>项目数</h6>
            <p>
              <span>12</span>项
            </p>
          </div>
        </li>
        <li class="bpl1-st-each">
          <i class="bpl1-ste-icon"><img src="@/assets/cockpit/subdivision/securityOneMap/item2-2-icon.png" alt="" /></i>
          <div class="bpl1-ste-word">
            <h6>批准总面积</h6>
            <p>
              <span>14,512</span>亩
            </p>
          </div>
        </li>
      </ul>
      <div class="chart2">
        <p class="title">超期预警情况</p>

        <div class="chart-box2">
          <div class="red">
            <span>已超期</span>
            <div><span>15</span>处</div>
          </div>
          <div class="yellow">
            <span>3个月内</span>
            <div><span>15</span>处</div>
          </div>
          <div class="blue">
            <span>3-6个月内</span>
            <div><span>15</span>处</div>
          </div>
          <div class="cyan">
            <span>6个月后</span>
            <div><span>15</span>处</div>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import { CockpitApi } from '@/api/cockpit'

@Component({
  name: 'Item2',
  components: {}
})
export default class Item2 extends Vue {
  private list1: any = [
    {
      label: '用途管制处',
      num: '100'
    },
    {
      label: '权益处',
      num: '90'
    },
    {
      label: '信访处',
      num: '80'
    },
    {
      label: '科室处',
      num: '70'
    },
    {
      label: '建二处',
      num: '60'
    }
  ]
  private list2 = [
    {
      label: '用途管制处',
      num: '100'
    },
    {
      label: '权益处',
      num: '90'
    },
    {
      label: '信访处',
      num: '80'
    },
    {
      label: '科室处',
      num: '70'
    },
    {
      label: '建二处',
      num: '60'
    }
  ]
  private totalObj: any = {}
  format(percentage: number) {
    return percentage
  }
  created() {
    this.init()
    this.initList()
    this.initList2()
  }
  init() {
    CockpitApi.administrationApi('receipt').then((res) => {
      this.totalObj = res.data.dataList && res.data.dataList[0]
    })
  }
  initList() {
    CockpitApi.administrationApi('receiptBanLi').then((res) => {
      const eq = res.data
      this.list1 = eq.dataList
      const total = (eq.dataList[0] && eq.dataList[0].count) || 1
      this.list1 &&
        this.list1.forEach((q: any) => {
          q.value = ((q.count / total) * 100).toFixed(2)
        })
    })
  }
  initList2() {
    CockpitApi.administrationApi('receiptZhengDianLv').then((res) => {
      this.list2 = res.data.dataList
    })
  }
}
</script>
<style lang="scss" scoped>
@import '~@/styles/cockpit.scss';

.bb-bg {
  width: 100%;
  height: 100%;
  padding: 16px;
  background: url('~@/assets/cockpit/subdivision/administration/item-bg.png') no-repeat 0/ 100% 100%;
  // background: rgba(0, 8, 25, 0.1);
  .bpl-container {
    padding-top: 8px;
    overflow-x: hidden;
  }
}
.bpl1-stac {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  .border-right-line {
    border-right: solid 1px rgba(255, 255, 255, 0.1);
  }
  .bpl1-st-each {
    flex: none;
    display: flex;
    width: 44%;
    margin-top: 10px;
    .bpl1-ste-icon {
      flex: none;
      width: 64px;
      height: 64px;
      > img {
        display: block;
        width: 100%;
        height: 100%;
      }
    }
    .bpl1-ste-word {
      margin-left: 8px;
      flex: none;
      > h6 {
        font-size: 14px !important;
        line-height: 18px;
        color: #bffeff;
        text-align: left;
        font-weight: 400;
        margin: 6px 0 0 0;
      }
      > p {
        font-size: 12px !important;
        line-height: 30px;
        color: #fff;
        text-align: left;
        font-weight: 500;
        margin: 4px 0 0 0;
        span {
          font-size: 20px !important;
          margin-left: 8px;
        }
      }
    }
    .bpl1-ste-chart {
      flex: none;
      width: 64px;
      height: 64px;
      padding: 2px;
      position: relative;
      margin: 0 0 0 12px;
      .bpl1-ste-chart-base {
        width: 100%;
        height: 100%;
      }
      .bpl1-ste-chart-word {
        width: 80%;
        position: absolute;
        left: 10%;
        top: 50%;
        transform: translate(0, -50%);
        > h6 {
          font-size: 16px !important;
          text-shadow: 0 0 4px #00ffaa;
          color: #fff;
          line-height: 20px;
          text-align: center;
        }
        > p {
          font-size: 12px !important;
          line-height: 14px;
          color: #bffeff;
          text-align: center;
        }
      }
    }
  }
  .bpl1-st-line {
    flex: none;
    width: 1px;
    height: 64px;
    background: rgba(#fff, 0.1);
    margin: 0 4px;
  }
}

.title {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 8px;
  // line-height: 24px;
  font-size: 14px !important;
  color: #fff;
  margin-top: 18px;
  margin-bottom: 18px;
  background: linear-gradient(90deg, rgba(0, 106, 255, 1) 0%, rgba(0, 106, 255, 0) 100%);
  &::before {
    content: '';
    display: block;
    width: 2px;
    height: 8px;
    margin-right: 6px;
    background: rgba(0, 234, 255, 1);
    box-shadow: 0 0 8px 0 rgba(0, 149, 255, 1);
  }
}
.chart-box2 {
  display: flex;
  & > div {
    margin-right: 8px;
    flex-grow: 1;
    width: 100px;
    height: 57px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.05);
    padding-top: 10px;
    padding-left: 16px;
    > span {
      font-size: 12px !important;
      display: inline-block;
      line-height: 17px;
    }
    > div {
      color: #fff;
      > span {
        font-size: 16px !important;
        line-height: 19px;
        font-weight: bold;
        font-family: 'Roboto';
        display: inline-block;
        margin-right: 4px;
      }
    }
    &.red {
      // border: 1px solid #f53951;
      & > span {
        color: #f53951;
      }
      box-shadow: inset 2px 0 8px 0 rgba(245, 57, 81, 0.65);
    }
    &.yellow {
      // border: 1px solid #f9a73d;
      & > span {
        color: #f9a73d;
      }
      box-shadow: inset 2px 0 8px 0 rgba(249, 167, 61, 0.65);
    }
    &.blue {
      // border: 1px solid #5193ff;
      & > span {
        color: #5193ff;
      }
      box-shadow: inset 2px 0 8px 0 rgba(81, 147, 255, 0.65);
    }
    &.cyan {
      & > span {
        color: #4eeca8;
      }
      // border: 1px solid #4eeca8;
      box-shadow: inset 2px 0 8px 0 rgba(78, 236, 168, 0.65);
    }
    &:last-of-type {
      margin-right: 0;
    }
  }
}
</style>
